<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件修饰符</title>
  <script src="../js/vue.js"></script>
</head>
<style>
  *{
     margin-top: 20px;
  }
   .box1{
      padding: 5px;
      background-color: aqua;
   }
   .box2{
      padding: 5px;
      background-color: orange;
   }
   .list{
      height: 200px;
      width: 200px;
      background-color: aquamarine;
      overflow: auto;
   }
   li{
      height: 100px;
   }
</style>
<body>
  <!--(10)事件修饰符：
       1.prevent(常用)
       2.stop(常用)
       3.once(常用)
       4.capture
       5.self：只有event.target是当前操作的元素才可以触发事件，可以用来阻止冒泡
       6.passive：立刻执行默认行为，不会等回调函数执行完再去做
                  都不用主动去执行，默认行为被动地就先执行了
      (11)如果需要同时阻止多个，则可以连着写，比如 stop.prevent，有先后顺序，但是最后效果是一样的
  -->
    <div id="root">
      <!-- (1)事件修饰符：对事件做一些修饰，比如这边的click事件添加prevent(Default)修饰表示阻止默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="showInfo1">点我提示信息1</a>
    
        <div @click="showInfo1">
          <!-- (2)stop(Propagation)可以阻止事件冒泡
               (3)事件冒泡：box2被包含在box1内，都设置了事件
                  就点击事件来说，因为box2在box1里面，点击box2也就点击了box1，所以都触发了事件
                  由于box2区域比box1区域小，因此叫冒泡
          -->
           <a href="https://www.baidu.com"  @click.stop.prevent="showInfo2">点击我提示信息2</a>
        </div>
        <!-- (4)once事件只触发一次(常用) -->
        <button @click.once="showInfo2">点击我提示信息3</button>

        <!-- (5)事件捕获：和事件冒泡的实行顺序相反。由外向里逐步缩小范围，像捕获小偷一样
             (6)若点击一个多个嵌套的盒子，每个标签都有点击事件，则顺序是：
                同一个标签若既添加了捕获又添加了冒泡，则这两者按照代码顺序执行
                不同标签之间 先执行捕获，再执行冒泡
             (7)加上事件修饰就可以使当前事件在捕获的时候执行，而捕获在冒泡之前执行这样就可以改变原先冒泡顺序
             (8)通常直接嵌套加上@click默认会执行事件冒泡，想变成捕获事件需要使用addListener("click",()=>{},true)
                true表示捕获，false表示冒泡
        -->
        <div class="box1" @click.capture="showInfo1">
          div1
          <div class="box2" @click="showInfo2">
             div2
          </div>
        </div>
        <!-- (9)点的是按钮，因此event.target是指按钮，外面加了self就不会冒泡了
                可以阻止一些连锁反应
        -->
        <div @click.self="showInfo1">
           <button @click="showInfo2">点击我提示信息2</button>
        </div>

        <ul @wheel.passive="printI" class="list">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
      <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              name:'aaa'
            },
            methods:{
              showInfo1(e){
                //  e.preventDefault()
                 alert('同学你好1')
              },
              showInfo2(e){
                //  e.stopPropagation()
                 alert('同学你好2')
              },
              printI(){
                 for (let index = 0; index < 10000; index++) {
                     console.log(index)
                 }
              }
            }
        })
    </script>
</body>
</html>